<nz-spin [nzSpinning]="_isSpinning" [nzTip]="'组件加载中，请稍后...'">
<form nz-form style="margin-bottom: 36px;" [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)">
  <div nz-form-item nz-row>
    <h3>新增/修改网络展馆</h3>
  </div>
  <div nz-row [nzGutter]="8">
      <div nz-col [nzSpan]="12">
        <nz-card>
          <ng-template #title>
            课程内容
          </ng-template>
          <ng-template #body>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>上传封面图:</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control>
                <input type="hidden" formControlName="pic" value="picid">
                <app-previewimg  [(previewImgSrcs)]="previewImgSrc" (previewImgFileChange)="toSet(previewImgFile,picid,0)"  [(previewImgFile)]="previewImgFile" [maxPic]="1" style="padding: 0px"></app-previewimg>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSpan]="4">
                <label nz-form-item-required>标题</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('title')" nzHasFeedback>
                <nz-input formControlName="title"  [nzType]="'text'" [nzPlaceHolder]="'请输入标题'" [nzSize]="'large'" >
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('required')">请输入标题!</div>
                <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').pending">校验中...</div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSpan]="4">
                <label>发布类型</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('choosetype')">
                <nz-checkbox-group formControlName="choosetype" [(ngModel)]="checkOptionsOne" ></nz-checkbox-group>

              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>关键词</label>
              </div>
              <div>
                <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('keyword')" nzHasFeedback>
                  <nz-input formControlName="keyword"   [nzPlaceHolder]="'keyword'" [nzType]="'text'" [nzSize]="'large'">
                  </nz-input>
                  <div nz-form-explain *ngIf="getFormControl('keyword').dirty&&getFormControl('keyword').hasError('required')">请输入关键词！</div>
                </div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>发布状态</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('status')" nzHasFeedback>
                <nz-select formControlName="status" [nzSize]="'large'"  >
                  <nz-option [nzLabel]="'未发布'" [nzValue]="'0'"></nz-option>
                  <nz-option [nzLabel]="'已发布'" [nzValue]="'1'"></nz-option>
                  <nz-option [nzLabel]="'已下架'" [nzValue]="'2'"></nz-option>
                </nz-select>

                <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('required')">请确认密码！</div>
                <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('confirm')">您输入的两个密码不一致！</div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>展览简介</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('description')">
                <nz-input formControlName="description" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'请填写展览简介'"  [nzSize]="'large'">
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('description').dirty&&getFormControl('description').hasError('required')">请填写展览简介!</div>
              </div>
            </div>
          </ng-template>
        </nz-card>
      </div>
    <div nz-col [nzSpan]="12">
      <nz-card style="height: 537px">
        <ng-template #title>
          讲师介绍
        </ng-template>
        <ng-template #body>
          <div nz-form-item nz-row>
            <div nz-col [nzSpan]="4" nz-form-label>
              <label nz-form-item-required>讲师</label>
            </div>
            <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('lecturerid')">
              <nz-select
                *ngIf="ifchoose==0"
                style="width: 70%;float: left"
                nzAllowClear
                formControlName="lecturerid"
                [nzSize]="'large'"
                [nzPlaceHolder]="'Select a person'"
                [nzShowSearch]="true">
                <nz-option
                  *ngFor="let option of timeperiod"
                  [nzLabel]="option.lecturername+':'+option.lecturerdescription"
                  [nzValue]="option.id">
                </nz-option>
              </nz-select>
              <a *ngIf="ifchoose!=0" (click) = "ifchoose = 0" [nzSize]="'large'" style="width: 100%;float: right;line-height: 28px" nz-button [nzType]="'danger'">
                <span>取消新增</span>
              </a>
              <a *ngIf="ifchoose==0" [nzSize]="'large'" (click) = "ifchoose = 1" style="width: 25%;float: right;line-height: 28px" nz-button [nzType]="'default'">
                <span>新增</span>
              </a>

              <div style="clear: both;" nz-form-explain *ngIf="getFormControl('lecturerid').dirty&&getFormControl('lecturerid').hasError('required')">请选择或填写讲师!</div>
            </div>
          </div>
          <div *ngIf="ifchoose!=0">
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>上传头像</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control>
                <input type="hidden" formControlName="lecturerpic" value="picids">
                <app-previewimg  [(previewImgSrcs)]="previewImgSrcs" (previewImgFileChange)="toSet(previewImgFiles,picids,1)"  [(previewImgFile)]="previewImgFiles" [maxPic]="1" style="padding: 0px"></app-previewimg>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSpan]="4">
                <label nz-form-item-required>讲师姓名:</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('lecturername')" nzHasFeedback>
                <nz-input formControlName="lecturername"  [nzType]="'text'" [nzPlaceHolder]="'请输入讲师姓名'" [nzSize]="'large'" >
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('lecturername').dirty&&getFormControl('lecturername').hasError('required')">请输入讲师姓名!</div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>讲师描述</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('lecturerdescription')">
                <nz-input formControlName="lecturerdescription" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'请填写讲师描述'"  [nzSize]="'large'">
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('lecturerdescription').dirty&&getFormControl('lecturerdescription').hasError('required')">请填写讲师描述!</div>
              </div>
            </div>
          </div>
          <nz-alert
            *ngIf="ifchoose==0"
            [nzType]="'info'"
            [nzMessage]="'温馨提示'"
            [nzDescription]="'请选择或点击新增来绑定此课程的老师，课程老师只能绑定一位主讲老师...'"
            [nzShowIcon]="'true'">
          </nz-alert>
          <div nz-row style="width: 100%; padding: 8px;background-color: #f0f0f0;margin-top: 12px;padding-left: 24px;border-radius: 5px">
            <h2 style="font-size: 16px;padding: 12px 0px;display: block">设置章节</h2>
            <label>设置章节</label>
            <nz-input-number formControlName="zhang" [nzSize]="'large'" [nzMin]="1" [nzMax]="100" [nzStep]="1"></nz-input-number>
            <a [nzSize]="'large'" style="width: 88px;margin-left:8px;line-height: 28px;" nz-button [nzType]="'default'" (click)="changeRepeat()">
              <span>确定</span>
            </a>
          </div>
        </ng-template>
      </nz-card>
    </div>
  </div>
  <sections-com *ngFor="let key of repeat;" [index]="key" (test)="test($event)"></sections-com>


</form>
<div nz-form-item nz-row>
    <a style="float: right;" [nzSize]="'large'" style="width: 88px;float: right;line-height: 28px;" nz-button [nzType]="'default'" (click)="addnew()">
      <span>新增章节</span>
    </a>
    <button style="float:right;margin:0px 24px;" nz-button [nzSize]="'large'" (click)="resetForm($event)">重置</button>
    <button style="float: right" nz-button [nzType]="'primary'" [nzSize]="'large'"  (click)="submitFn()" [disabled]="!validateForm.valid">提交</button>

</div>

</nz-spin>

